<template>
  <div class="tt">
    <div class="box">
      <i class="el-icon-shopping-cart-2" @click="Get">
        <span>{{Cartlist.length}}</span>
      </i>
    </div>
    <div class="box_top">
      <!-- 价格排序 -->
      <i class="el-icon-top" @click="index">sort</i>
      <i class="el-icon-bottom" @click="index1">sort</i>
    </div>
    <div class="box_centre">
      <!-- 左边价格筛选 -->
      <div class="box_centre_left">
        <ul class="box_centre_left_ul">
          <li
            class="li"
            v-for="(item,index) in price"
            :key="index"
            @click="Onclick(item,index)"
            :class="{'box_centre_left_li':left==index}"
          >{{item.title}}</li>
        </ul>
      </div>
      <!-- 右边商品 -->
      <div class="box_centre_right" ref="box_height">
        <el-row>
          <el-col :xs="24" :sm="8" :md="6" v-for="(item,index) in list " :key="index">
            <div class="box_centre_right_bos">
              <img :src="item.productImage" alt />
              <p>{{item.productName}}</p>
              <p>￥{{item.salePrice}}</p>
              <el-row>
                <el-button type="success" @click="click(item)">加入购物车</el-button>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 底部loadging加载 -->
    <div class="box_footer_loadging" v-show="isShow">
      <img
        src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3681478079,2138136230&fm=26&gp=0.jpg"
        alt
      />
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      isShow: false, //加载图
      list: [],
      price: [],
      list1: [],
      left: -1, //筛选样式
      sort: true, //排序
      Cartlist: [],
    };
  },
  mounted() {
    this.$axios.get("http://localhost:8080/data.json").then((res) => {
      this.list = res.data.result.list;
      this.list1 = res.data.result.list;
      this.price = res.data.result.slider;
    });
    //
    this.Cartlist = this.$store.state.CartList;
    console.log(this.Cartlist);
    //下拉加载
    this.$refs.box_height.addEventListener("scroll", () => {
      var clientHeight = document.documentElement.clientHeight;
      var scrollTop = document.documentElement.scrollTop;
      var scrollHeight = document.documentElement.scrollHeight;
      if (scrollHeight - scrollTop - clientHeight < 1) {
        this.isShow = true;
        window.setTimeout(() => {
          this.$axios.get("http://localhost:8080/data2.json").then((res) => {
            this.list = [...this.list, ...res.data.result.list];
          });
          this.isShow = false;
        }, 3000);
      }
    });
  },
  methods: {
    //筛选
    Onclick(item, index) {
      this.list = [];
      this.left = index;
      this.list1.forEach((ele) => {
        if (item.low <= ele.salePrice && ele.salePrice <= item.hight) {
          this.list.push(ele);
        }
      });
    },
    index() {
      //排序
      this.sort = !this.sort;
      if (this.sort) {
        this.list.sort((a, b) => {
          return a.salePrice - b.salePrice;
        });
      } else {
        this.list.sort((a, b) => {
          return b.salePrice - a.salePrice;
        });
      }
    },
    index1() {
      this.sort = !this.sort;
      if (this.sort) {
        this.list.sort((a, b) => {
          return b.salePrice - a.salePrice;
        });
      } else {
        this.list.sort((a, b) => {
          return a.salePrice - b.salePrice;
        });
      }
    },
    //点击添加购物车
    click(item) {
      Dialog.confirm({
        message: "是否加入购物车",
      })
        .then(() => {
          this.$store.dispatch("onclick", item);
        })
        .catch(() => {
          // on cancel
        });
    },
    //跳转购物车
    Get(){
      this.$router.push({
        path:"/About"
      })
    }
  },
};
</script>
<style  scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.tt {
  width: 98%;
  background: rgb(247, 248, 250);
}
.box {
  width: 100%;
  height: 9vh;
  text-align: right;
  line-height: 9vh;
}
.box_top {
  width: 100%;
  height: 5vh;
  line-height: 5vh;
  text-align: right;
}
.box_centre {
  width: 100%;
  height: 80vh;
  display: flex;
}
.box_centre_left {
  width: 20%;
  height: 80vh;
  background: rgb(247, 248, 250);
}
.box_centre_right {
  width: 79%;
  height: 80vh;
  overflow: scroll;
}
.box_centre_right::-webkit-scrollbar {
  display: none;
}
.box_centre_right_bos {
  height: 50vh;
  text-align: center;
  border: 1px solid gainsboro;
}
.box_centre_right_bos img {
  width: 100%;
  height: 50%;
}
.box_footer_loadging {
  width: 100%;
  height: 100px;
}
.box_footer_loadging img {
  width: 100px;
  height: 100px;
  margin-left: 45%;
}
.box_centre_left_ul li {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.box_centre_left_li {
  border-left: 3px solid red;
  font-size: 15px;
  text-align: left 10px;
}
.li {
  font-size: 15px;
  color: rgb(161, 159, 159);
}
</style>